<template>
  <div class="edit-table-container">
    <div class="table-tool">
      <el-radio-group v-model="radio">
        <el-radio label="top">添加到顶部</el-radio>
        <el-radio label="bottom">添加到底部</el-radio>
        <el-radio label="hide">隐藏</el-radio>
      </el-radio-group>
    </div>
    <el-divider class="defined-divider"/>
    <EditTablePropTable
      :mode="radio"
      :tbData="tableData"
      :tbColumn="tableColumn"
      @handleDelete="onDelete"
      @handleAdd="onAdd"
      @handleChange="onChange"
    />
    <div class="button-container">
      <el-button type="primary" class="common-button" @click="onSubmit">
        <i class="iconfont com-icon icon-check-empty"></i>
        <span>提交</span>
      </el-button>
      <el-button class="common-button" @click="onReset">
        <i class="iconfont com-icon icon-refresh"></i>
        <span>重置</span>
      </el-button>
    </div>
  </div>
</template>

<script>
import { editTableData } from '@/mock/jsModule/table.js'
import EditTablePropTable from '@/components/table/EditTablePropTable/index.vue'
export default {
  name: 'index',
  components:{
    EditTablePropTable
  },
  data(){
    return{
      radio: "bottom",
      tableData: [],
    }
  },
  mounted(){
    this.init()
  },
  computed:{
    tableColumn(){
      const column = [
        {  type:'selection', width: '60', align: 'center'},
        { name: 'title', label: '活动名称', width: 280, valueType: 'input'},
        { name: 'decs', label: '描述', width: 280, valueType: 'input'},
        { name: 'state', label: '状态', valueType: 'select',
          options:[{value: -1, label: '未开启'},{value: 1, label: '已开启'},{value: 0, label: '已结束'}]
        },
        { name: 'created_at', label: '活动时间', valueType: 'date'}
      ]
      return column
    },
  },
  methods:{
    init(){
      this.tableData = JSON.parse(JSON.stringify(editTableData))
    },
    onSubmit(){
      this.$message.success('提交成功')
    },
    onReset(){
      this.tableData = JSON.parse(JSON.stringify(editTableData))
      this.$message.success('重置成功')
    },
    onAdd(){
      console.log('添加一行  ==============')
    },
    onDelete(){
      console.log('删除一行  ==============')
    },
    onChange(val){
      console.log('选择行发生变化   ========',val)
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-table-container{
  background: white;
  border-radius: 4px;
  padding: 20px ;
  box-shadow: 0 0 12px rgba(0, 0,0 , 0.05);
  height: calc(100vh - 180px);
}
.table-tool{
  text-align: right;
  padding-top: 10px;
}
.defined-divider{
  margin: 10px 0 !important;
}
.button-container{
  text-align: left;
}
</style>
